<template>
	<view class="center">
		<view class="logo">
			<view @click="dispatchFunc({ route: '/pages/tabbar/mine/personal/index' })" class="user_info">
				<image  class="logo-img" :src="userData.avatarUrl"></image>
				<view class="user_info-right">
					<text class="user-name">{{ userData.name }}</text>
					<text class="user-grade">{{ userData.name }}</text>
				</view>
				<text class="navigat-arrow">&#xe65e;</text>
			</view>
			
			<view class="canvas-pan yibiao">
					<canvas  class="yibiao-1" canvas-id="yibiao-1"></canvas>
					<canvas  class="yibiao-2" canvas-id="yibiao-2"></canvas>
					<canvas  class="yibiao-3" canvas-id="yibiao-3"></canvas>
			</view>
			
			<view class="pan-title">
				<view class="pan-title-list pan-title-1">
					<navigator url="/pages/tabbar/mine/study/index">
						学习记录
					</navigator>
				</view>
				<view class="pan-title-list pan-title-2">
					<navigator url="/pages/tabbar/mine/review/index">
						错题集
					</navigator>
				</view>
				<view class="pan-title-list pan-title-3">学习报告</view>
			</view>
		</view>
		
		<view class="center-list" v-for="(segmentItem, segmentIndex) in listPanel" :key="segmentIndex">
			<view @click="dispatchFunc(item)" class="center-list-item" v-for="(item, index) in segmentItem" :key="index">
				<image class="list-icon" mode="widthFix" :src="item.icon"></image>
				<text class="list-text">{{ item.title }}</text>
				<text class="navigat-arrow">&#xe65e;</text>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';

import { uniRate } from '@dcloudio/uni-ui';
import mixins from '@/mixins/index';
import messageBadgeEvent from '@/mixins/event/messageBadgeEvent';
import MineService from '@/services/mine/index';
const mineService = new MineService();
import sugarCallBack from '@/libs/sugar/callback/index';

const { judgeCallBack } = sugarCallBack;

const per = [[189,163],[282,221],[189,163]]
const perall = per.map(s=>s[0]).reduce((s1,s2)=>s1+s2)

const kaigen2 = Math.sqrt(2)/2

export default {
	components: { uniRate },
	mixins: [mixins, messageBadgeEvent],
	data() {
		return {
			messageBadgeIndex: 0,
			canvasSetting: {
				height: uni.upx2px(284),
				width: uni.upx2px(700),
				fontSize: uni.upx2px(60),
				textHeight: uni.upx2px(220),
				distance: uni.upx2px(16),
				id: 'firstCanvas'
			},
			avatarUrl: '/static/img/qq.png',
			context: undefined,
			//rateNum:2,
			studyPanel: [],
			listPanel: [],
		};
	},
	computed: {
		// segmentList(){
		//     return [this.roleMenu];
		// }
	},
	methods: {
		msgCenter(){
			uni.navigateTo({
				url:'/pages/message/outMsgList'
			})
		},
		goLogin() {
			if (!this.hasLogin) {
				uni.navigateTo({
					url: '/pages/system/login/index'
				});
			}
		},
		dispatchFunc(item) {
			if (item.route != undefined) {
				uni.navigateTo({
					url: item.route
				});
				return;
			}
			switch (item.code) {
				case 'clearGuild':
					this.clearSplash();
					break;
				case 'logout':
					this.logout();
					break;
			}
		},
		clearSplash() {
			uni.setStorage({
				key: 'launchFlag',
				data: false
			});
			uni.showToast({
				title: '清除引导页状态成功',
				duration: 2000,
				success: function() {
					uni.navigateTo({
						url: '/pages/index/guide'
					});
				}
			});
		},
		getCenterHeight(processtext,canvasWidth,context){
			let processtextLength = context.measureText(processtext).width;
			//console.log('processtextLength:',processtextLength)
			if (processtextLength == 0) {
				processtextLength = canvasWidth / 5;
			}
			const countTextCenter = (canvasWidth - processtextLength) / 2;
			return [processtext,countTextCenter];
		},
		getPositionByPer(perVal,r){
			let angle1 = (- perVal * 270 - 135 )
			console.log('angle1:',angle1)
			angle1 = Math.abs(angle1) > 360 ? angle1 % 360 : angle1 + 360
			let angle = angle1
			if(angle1 <= - 135){
				angle = (-135 - 5)
			}else if(angle1<= -45){
				angle = (-45 + 15)
			}
			
			return [
				(Math.cos(2*Math.PI/360*angle )+1)* r,
				(-Math.sin(2*Math.PI/360*angle )+1)* r,
			]
		},
	drawThreePan(){
			const allSize =  uni.upx2px(700);
			const yiiao1 = uni.createCanvasContext('yibiao-1',this);
			const yiiao2 = uni.createCanvasContext('yibiao-2',this);
			const yiiao3 = uni.createCanvasContext('yibiao-3',this);
			
			const textVal = [80,20,120]
			
			const perVal = [1/6,0.5,5/6];
			
			const bgPan1 = '/static/img/mine/pan/1.png';
			const bgPan2 = '/static/img/mine/pan/2.png';
			const bgPan3 = '/static/img/mine/pan/3.png';
			
			const sanjiao = '/static/img/mine/pan/sanjiao.png';
			
			const canvasWidthArr = [per[0][0]/perall*allSize,per[1][0]/perall*allSize,per[2][0]/perall*allSize]
			
			const rArr = canvasWidthArr.map(s=>s/2)
			
			
			setTimeout(()=>{
				yiiao1.drawImage(bgPan1, 0, 0, canvasWidthArr[0], uni.upx2px(per[0][1]));
				yiiao1.save();
				const position = this.getPositionByPer(perVal[0],rArr[0]);
				yiiao1.translate(...position)
				yiiao1.rotate((perVal[0]*270-135)*Math.PI/180);
				yiiao1.drawImage(sanjiao,0,0,uni.upx2px(16),uni.upx2px(16));
				yiiao1.restore();
				yiiao1.setFillStyle('#fff');
				yiiao1.setFontSize(24)
				yiiao1.fillText(...this.getCenterHeight(textVal[0],canvasWidthArr[0]-10,yiiao1),uni.upx2px(per[0][1])-15);
				yiiao1.draw();
			},1)
			setTimeout(()=>{
				yiiao2.drawImage(bgPan2, 0, 0, canvasWidthArr[1] , uni.upx2px(per[1][1]));
				yiiao2.save();
				const position = this.getPositionByPer(perVal[1],rArr[1]);
				yiiao2.translate(...position)
				yiiao2.rotate((perVal[1]*270-135)*Math.PI/180);
				yiiao2.drawImage(sanjiao,0,0,uni.upx2px(16),uni.upx2px(16));
				yiiao2.restore();
				yiiao2.setFillStyle('#fff');
				yiiao2.setFontSize(24)
				yiiao2.fillText(...this.getCenterHeight(textVal[1],canvasWidthArr[1]-10,yiiao2),uni.upx2px(per[1][1])-22);
				yiiao2.draw();
			},1)
			setTimeout(()=>{
				yiiao3.drawImage(bgPan3, 0, 0, canvasWidthArr[2], uni.upx2px(per[2][1]));
				yiiao3.save();
				const position = this.getPositionByPer(perVal[2],rArr[2]);
				yiiao3.translate(...position)
				yiiao3.rotate((perVal[2]*270-135)*Math.PI/180);
				yiiao3.drawImage(sanjiao,0,0,uni.upx2px(16),uni.upx2px(16));
				yiiao3.restore();
				yiiao3.setFillStyle('#fff');
				yiiao3.setFontSize(24)
				yiiao3.fillText(...this.getCenterHeight(textVal[2],canvasWidthArr[2]-10,yiiao3),uni.upx2px(per[2][1])-15);
				yiiao3.draw();
			},1)
			
		},
		drawDashBoard(percentage = 50.0, timeIndex = 1) {
			const { distance, id, width: canvasWidth, height: canvasHeight, fontSize, textHeight } = this.canvasSetting;
			if (!this.context) {
				this.context = uni.createCanvasContext(id);
			}
			const context = this.context;

			/*
                画文字
                 */
			context.setFontSize(fontSize);
			const processtext = parseInt(percentage) + '%';
			let processtextLength = context.measureText(processtext).width;
			//console.log('processtextLength:',processtextLength)
			if (processtextLength == 0) {
				processtextLength = canvasWidth / 5;
			}
			const countTextCenter = (canvasWidth - processtextLength) / 2;

			if (timeIndex == 1) {
				let bgPan = '/static/img/mine/pan-bg.png';
				// #ifdef APP-PLUS
				bgPan = '/static/img/mine/pan-bg-app.png';
				// #endif
				//context.globalAlpha = 0.2
				context.drawImage(bgPan, 0, 0, canvasWidth, canvasHeight);

				context.setFillStyle('#fff');
				context.fillText(processtext, countTextCenter, textHeight);
				context.draw();
			}
			const lineWidth = canvasWidth * 1 / 6.5;
			context.lineWidth = lineWidth;
			const eAngle = (percentage / 100.0 + 1) * Math.PI;
			const radius = canvasWidth / 2 - lineWidth / 2 - distance / 2 - uni.upx2px(10);
			context.beginPath();
			context.arc(canvasWidth / 2, canvasHeight, radius, Math.PI, eAngle, false);
			//context.strokeStyle = '#0ba4ff';
			context.strokeStyle = 'rgba(11,164,255,0.4)';
			context.stroke();
			//context.beginPath();

			context.draw(true);
		},
		showDashBoard(percentage, callback) {
			//let percentage = Math.floor(Math.random() * (100 - 0)) + 0;
			this.drawDashBoard(percentage);
			//     if (callback!=undefined && typeof callback == 'function'){
			//                callback();
			//     }
			//    const times = 20;
			//    let timeIndex = 1;
			//    //const rateSeconds = timeout/times;
			//    const process =  setInterval(()=>{
			//        if (timeIndex<=times){
			//            const mapPercentage = percentage * timeIndex / times
			//            this.drawDashBoard(mapPercentage,timeIndex);
			//            timeIndex++;
			//        }else{
			//            clearInterval(process);
			//            if (callback!=undefined && typeof callback == 'function'){
			//                callback();
			// 			}
			//        }
			//    },50)
		},
		getMinePanel(callback) {
			const $this = this;
			mineService.getMinePanel({ roleType: this.userData.roleType }).then(resultDto => {
				judgeCallBack(callback);
				const { success, result } = resultDto;
				if (success) {
					//   $this.title = result.title;
					//   $this.desc = result.desc;
					//   $this.info = result.info;
					//   $this.personalInfo = result.personalInfo;
					const { accuracy, studyPanel, listPanel } = result;
					//this.showDashBoard(accuracy);
					this.drawThreePan();
					$this.studyPanel = studyPanel;
					$this.listPanel = [listPanel];
				}
			});
		}
	},
	onReady() {},
	onPullDownRefresh() {
		//this.rateNum = 3
		//监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
		//this.showDashBoard(()=>uni.stopPullDownRefresh());
		this.getMinePanel(() => uni.stopPullDownRefresh());
	},
	onLoad() {
		this.getMinePanel();
	},
	//点击导航栏 buttons 时触发
	onNavigationBarButtonTap(e) {
		const index = e.index;
		if (index === 1) {
			uni.navigateTo({
				url: '/pages/system/settings/index'
			});
		} else if (index === 0) {
			this.clickMessage();
		}
	}
};
</script>

<style lang="less">
@font-face {
	font-family: texticons;
	font-weight: normal;
	font-style: normal;
	src: url('https://at.alicdn.com/t/font_984210_5cs13ndgqsn.ttf') format('truetype');
}

page,
view {
	display: flex;
}

page {
	background-color: #f8f8f8;
}

.center {
	flex-direction: column;
}
.statusBar {
	width: 750upx;
	height: 128upx;
	background-color: #377cfd;
}
.logo {
	width: 750upx;
	height: 475upx;
	padding: 20upx 20upx;
	box-sizing: border-box;
	background-color: #377cfd;
	flex-direction: column;
	align-items: center;
	
	.navigat-arrow {
		color: #fff;
	}
}

.logo-hover {
	opacity: 0.8;
}

.logo-title {
	height: 150upx;
	flex: 1;
	align-items: center;
	justify-content: space-between;
	flex-direction: row;
	margin-left: 20upx;
}

.uer-name {
	height: 60upx;
	line-height: 60upx;
	font-size: 38upx;
	color: #ffffff;
}

.go-login.navigat-arrow {
	font-size: 38upx;
	color: #ffffff;
}

.login-title {
	height: 150upx;
	align-items: self-start;
	justify-content: center;
	flex-direction: column;
	margin-left: 20upx;
}

.center-list {
	background-color: #ffffff;
	// margin-top: 20upx;
	width: 750upx;
	flex-direction: column;
}

.center-list-item {
	height: 90upx;
	width: 750upx;
	box-sizing: border-box;
	flex-direction: row;
	padding: 0upx 20upx;
	align-items: center;
}

.border-bottom {
	border-bottom-width: 1upx;
	border-color: #c8c7cc;
	border-bottom-style: solid;
}

.list-icon {
	width: 42upx;
	height: 42upx;
	margin-right: 20upx;
}

.list-text {
	height: 90upx;
	line-height: 90upx;
	font-size: 28upx;
	color: #333;
	flex: 1;
	text-align: left;
}

.navigat-arrow {
	height: 90upx;
	width: 40upx;
	line-height: 90upx;
	font-size: 34upx;
	color: #555;
	text-align: right;
	font-family: texticons;
}
.center-list-item {
	height: 112upx;
}
.user_info {
	width: 100%;
	height: 106upx;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	

	.logo-img {
		width: 80upx;
		height: 80upx;
		border-radius: 50%;
		border: 2upx solid #fff;
	}
	&-right {
		// flex: 1;
		flex-direction: column;
		margin-left: 15upx;
		.user-name {
			display: block;
			font-size: 28upx;
			color: #fff;
		}
	}
	.user-waihao {
		font-size: 20upx;
		color: #fff;
		margin-top: 10upx;
	}
	.user-waihao-pic {
		width: 20upx;
		height: 26upx;
		margin-right: 5upx;
		vertical-align: middle;
	}
	.msg {
		width: 46upx;
		&-img {
			width: 46upx;
			height: 40upx;
		}
	}
}
.canvas-pan {
	width: 568upx;
	height: 284upx;
	// background-color: #c8c7cc;
}
.mine-links {
	background-image: url('~@/static/img/mine/link-btn-bg.png');
	// background-color: #fff;
	width: 750upx;
	height: 106upx;
	background-size: 100% 100%;
	// margin-top: -46upx;
	margin-top: -64upx;

	&-btn {
		line-height: 90upx;
		font-size: 28upx;
		color: #333;
		width: 318upx;
		text-align: center;
	}
	.line {
		color: #d8d8d8;
		margin-top: 15upx;
	}
	&-history:first-child {
		margin-left: (750upx - 318upx * 2) / 2;
	}
}

.yibiao{
	// width: 100%;
	width: 710upx;
	height: 260upx;
	align-items:flex-end;
	&-1{
		flex: 189;
		height: 163upx;
		// background: url(../../../static/img/mine/pan/1.png) no-repeat;
		// background-size: 90%;
		// background-position: center;
	}
	&-2{
		flex: 282;
		height: 221upx;
		// background: url(../../../static/img/mine/pan/2.png) no-repeat;
		// background-size: 90%;
		// background-position: center;
	}
	&-3{
		flex: 189;
		height: 163upx;
		// background: url(../../../static/img/mine/pan/3.png) no-repeat;
		// background-size: 90%;
		// background-position: center;
	}
}

.pan-title {
	position: relative;
	width: 100%;
	font-size: 24upx;
	color: #fff;
	.pan-title-list {
		width: 142upx;
		height: 40upx;
		border-radius: 20upx;
		justify-content: center;
		line-height: 40upx;
		box-shadow: 0 4upx 10upx 0 #047bfe;
	}
	&-1 {
		position: absolute;
		top: 10upx;
		left: 30upx;
		background-image:linear-gradient(to right,#75ddfe,#24bbed) ;
	}
	&-2 {
		position: absolute;
		top: 10upx;
		left: 280upx;
		background-image:linear-gradient(to right,#68e3d3,#2cc8d6) ;
	}
	&-3 {
		position: absolute;
		top: 10upx;
		left: 540upx;
		background-image:linear-gradient(to right,#a5a7fc,#767df8) ;
	}
}
.user-grade {
	font-size: 30upx;
	color: #fff;
}
</style>
